<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/animate.min.css">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet/less" href="../css/common.less">
  <link rel="stylesheet/less" href="../css/services.less">
  <link rel="stylesheet/less" href="../css/reset.less">
</head>
<body>
      <!-- 头部信息 -->
  <div id="head">
    <div class="container">
      <div class="left">
        <div class="item">
          <span class="iconfont">&#xeb40;</span>
          <span>Mon-Friday 9am -5pm</span>
        </div>
        <div class="item">
          <span class="iconfont">&#xe611;</span>
          <span>123-123-123</span>
        </div>
        <div class="item">
          <span class="iconfont">&#xe604;</span>
          <span>email@domain.com</span>
        </div>
      </div>
      <div class="right">
        <div class="icon"><span class="iconfont">&#xe689;</span></div>
        <div class="icon"><span class="iconfont">&#xe87f;</span></div>
        <div class="icon"><span class="iconfont">&#xe883;</span></div>
        <div class="icon"><span class="iconfont">&#xe60b;</span></div>
      </div>
    </div>
  </div>
  <!-- 导航栏 -->
  <div id="header">
    <nav class="navbar navbar-default navbar-white" id="navbar-white">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Karting <span>Arena</span></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../index.html">首页</a></li>
            <li><a href="./about.html">关于我们</a></li>
            <li><a href="./services.html">服务</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">画廊 <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-left">
                <li class="dropdown ">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                    aria-expanded="false">网格布局 <span class="caret"></span></a>
                  <ul class="dropdown-menu dropdown-menu-right er">
                    <li><a href="./gallery1.html">2 列</a></li>
                    <li><a href="#">3 列</a></li>

                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown ">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">博客 <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-left">
                <li><a href="#">右栏</a></li>
                <li><a href="#">一个博客</a></li>
              </ul>
            </li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </div>
  <!-- 轮播图 -->
  <div id="slide" >
    <div class="slide_img ">
      <img src="../image/3.jpg" alt="" srcset="" id="slide-img">
    </div>
    <div class="slide_content">
      <h1 class="wow fadeInDown" data-wow-delay=".5s">关于我们</h1>
      <div class="a">
        <a href="../index.html">首页</a>
        <span>&gt;</span>
        <span>服务</span>
      </div>
    </div>

  </div>
  <div id="col-4-section">
    <div class="container">
      <div class="titles">
        <h1>我们的服务</h1>
        <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
      </div>
      <div class="col">
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div><span class="iconfont">&#xe849;</span></div>
          <h2>免费取消</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
        <div class="row wow fadeInDown" data-wow-delay=".5s">
          <div><span class="iconfont">&#xebcf;</span></div>
          <h2>不收取预订费用</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div><span class="iconfont">&#xf0fc;</span></div>
          <h2>可靠的传输</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
        <div class="row wow fadeInDown" data-wow-delay=".5s">
          <div><span class="iconfont">&#xe7ae;</span></div>
          <h2>有竞争力的价格</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
      </div>

    </div>
  </div>
  <div id="col-8-section">
    <div class="row">
      <span class="iconfont che">&#xe936;</span>
      <div class="sz">200</div>
      <p>车辆可用</p>
    </div>
    <div class="row">
      <span class="iconfont">&#xe686;</span>
      <div class="sz">400</div>
      <p>教练可用</p>
    </div>
    <div class="row">
      <span class="iconfont">&#xef2e;</span>
      <div class="sz">25</div>
      <p>奖</p>
    </div>
  </div>
   <!-- 小标题 -->
   <div id="titles">
    <div class="container">
      <div class="title">
        <h1>定价信息</h1>
      </div>
    </div>
  </div>
  <div id="col-10-section">
    <div class="container">
      <div class="col">
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <h1>基本</h1>
          <h2>$49</h2>
          <div class="contes">
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>自行车服务</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>竞争分析</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>事件信息</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>月度管理</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>月度报告</p>
            </div>
          </div>
          <div class="btn">
            立即购买
          </div>
        </div>
        <div class="break wow fadeInUp" data-wow-delay=".5s">
          <h1>溢价</h1>
          <h2>$99</h2>
          <div class="contes">
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>自行车服务</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>竞争分析</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>事件信息</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>月度管理</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>月度报告</p>
            </div>
          </div>
          <div class="btn">
            立即购买
          </div>
        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <h1>会员</h1>
          <h2>$199</h2>
          <div class="contes">
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>自行车服务</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>竞争分析</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>事件信息</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>月度管理</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>月度报告</p>
            </div>
          </div>
          <div class="btn">
            立即购买
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="buttom">
    <div class="container">
      <div class="top">
        <div class="buttom">
          <div class="logo">
            Karting <span>Arena</span>
          </div>
          <div class="conte">
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。我不认为这是一种暂时的意外，但我认为这是一种巨大的意外。</p>
            <div class="icon">
              <div class="icon1"><span class="iconfont">&#xe689;</span></div>
              <div class="icon1"><span class="iconfont">&#xe87f;</span></div>
              <div class="icon1"><span class="iconfont">&#xe883;</span></div>
              <div class="icon1"><span class="iconfont">&#xe60b;</span></div>
            </div>
          </div>
        </div>
        <div class="buttom">
          <div class="a">有用的服务</div>
          <div class="a1">
            <a href="javascript:;">教练</a>
            <a href="javascript:;">车辆</a>
            <a href="javascript:;">预订</a>
            <a href="javascript:;">道路</a>
            <a href="javascript:;">折扣</a>
          </div>
        </div>
        <div class="buttom">
          <div class="b">需要帮忙吗?</div>
          <div class="b1">
            <div class="item">
              <span class="iconfont">&#xe604;</span>
              <span>email@domain.com</span>
            </div>
            <div class="item">
              <span class="iconfont">&#xe611;</span>
              <span>123-123-123</span>
            </div>
            <div class="item">
              <span class="iconfont">&#xefec;</span>
              <span>knowledgeaware.tk</span>
            </div>

          </div>
        </div>
      </div>

      <div class="buttom1">
        <div class="left">
          <p>Copyright © 2024.Company name All rights reserved.</p>
        </div>
        <div class="right">
          <a href="javascript:;">教练</a>
          <a href="javascript:;">车辆</a>
          <a href="javascript:;">预订</a>
          <a href="javascript:;">道路</a>
          <a href="javascript:;">折扣</a>
        </div>
      </div>
    </div>
  </div>
  <div id="back">
    <a href="#head" >
      <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
    </a>

  </div>
  <div id="jiazhai">
    <img src="../image/ajax-loader.gif" alt="" srcset="">
  </div>
</body>
</html>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/less.min.js"></script>
<script src="../js/wow.min.repeat.js"></script>
<script src="../js/common.js"></script>
<script>
    var t = true
  //给整个页面绑定一个滚动条事件
  $(document).scroll(function () {
    var distance = $(this).scrollTop();
    if (distance > 1068 && t) {
      $('.sz').each(function () {

        var t1 = parseInt($(this).text())
        var s = 2000 / t1
        var con = 0
        var T = setInterval(() => {
          $(this).text(con)
          if (con == t1) {
            clearInterval(T)
          }
          con++
        }, s)
        // 这里可以对每个具有类名 .sz 的元素进行操作
      });
      t = false

    }
  }
  )
</script>